<!-- 党费缴纳 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../admin/css/other/console1.css" />
  <title>党费信息</title>
  <style>
    .zz {
      transition: all 0.3s ease;
      font-size: 36px;
    }

    .layui-card:hover .zz {
      transform: scale(1.05);
      color: #fff;
    }

    .top {
      height: 120px;
      padding: 15px;

    }

    .layui-card-body {
      /* border: 1px solid red; */
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      /* 减去标题高度 */
      /* text-align: center; */

    }

    .sz {

      /* border: 1px solid black; */
      position: relative;
      height: 42px;
      line-height: 42px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      padding: 0 15px;
      border-radius: 2px 2px 0 0;
      text-align: center;
    }

    .zz {
      width: 120px;
      color: rgba(255, 255, 255, 1);
      font-size: 15px;
      text-align: center;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .layui-card {
      /* height: 120px; */
      /* border: 1px solid red; */
      /* 添加一个小手 */
      cursor: pointer
        /* 点击那个怎么一个阴影方便我知道我选中那个 */
    }

    .layui-card.selected {

      /* border: 2px solid #d31805; */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    .el-form-item {
      margin-bottom: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <!-- <div class="top">
      <div class="layui-row layui-col-space10" v-cloak>
        <div v-for="i in 12" :key="i" class="layui-col-xs6 layui-col-md1" @click="handleCardClick(i)">
          <div class="layui-card top-panel bg" :style="{backgroundColor:monthColors[i-1]}">
            <div class="sz">{{i}}月
            </div>
            <div class="layui-card-body" style="height: 50px;width: 100%;">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1"
                  style="display: flex;justify-content: space-between;">
                  <div>
                    <div style="font-size: 15px;">党员</div>
                    {{ partyMemberMonthlyData[i-1]?.Pay_Quantity || 0 }} / {{
                    partyMemberMonthlyData[i-1]?.Total_Quantity || 0 }}
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div>
                    <div style="font-size: 15px;">党组织</div>
                    <span
                      :style="{ 'font-size': '12px', 'color': partyOrgMonthlyData[i-1]?.payStatus === '已缴纳' ? 'green' : 'red' }">
                      {{ partyOrgMonthlyData[i-1]?.payStatus || '未缴纳' }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="title" style="margin:0 10px;">
      <div style="padding: 5px;">
        党员名称&nbsp;&nbsp;<el-input v-model="input" style="width: 200px;margin-right: 10px;"
          placeholder="请输入内容"></el-input>
        交纳状态&nbsp;&nbsp;
        <el-select v-model="value" clearable placeholder="请选择" style="width: 200px;margin-right: 10px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        交纳月份&nbsp;&nbsp;
        <el-date-picker @change="changeMonth" v-model="value2" value-format="YYYY-MM" type="month" placeholder="选择月份"
          style="margin-right: 10px;"></el-date-picker>
        <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>

        <el-button color="#626aef" :dark="isDark" @click="personalAdd" style="margin: 0; margin-right: 10px;" plain
          round>{{new Date().getMonth() <= new Date(value2).getMonth()?'缴费':'补缴'}}</el-button>
            <!-- <el-button style="width: 60px;margin-top: -6px;" @click="reset">重置</el-button> -->
            <!-- <button class="button" @click="personalAdd">{{new Date().getMonth() <= new Date(value2).getMonth()?'缴费':'补缴'}}</button> -->
            <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" plain
              round>批量导入</el-button>
            <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" plain round>批量导出</el-button>
            <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" plain round>批量删除</el-button> -->
            <!-- <button class="button" @click="calendar = true">查看月历</button> -->
            <!-- <button class="button">追缴通知</button> -->
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree style="max-width: 600px" default-expand-all :expand-on-click-node="false" :data="treeData"
          :props="{ label:'Party_Organization_Name'}" @node-click="handleNodeClick" :expand-on-click-node="false">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <el-icon v-if="node.level == 1&&node.expanded">
                <Folder-Opened />
              </el-icon>
              <el-icon v-else>
                <Folder />
              </el-icon>
              <span>{{ node.label }}</span>
              <div class="item" v-if="isfree(data)"
                :style="{backgroundColor:Party_Organization_SerialNumber==data.Party_Organization_SerialNumber?'rgb(235.9, 245.3, 255)':''}">
                <el-dropdown trigger="click" @command="(command)=>{this[command](data)}">
                  <el-icon class="el-icon--right"><More-Filled /></el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item  command="handleAdds">上缴</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <div style="display: flex;width: 100%;height: 100%; flex-wrap: wrap;">
          <div v-for="i in 12" :key="i"
            style="width: calc((100% - 50px) / 4);height: calc((100% - 40px) / 3);margin: 10px 0 0 10px;">
            <div class="layui-card top-panel" style="display: flex;flex-direction: column;"
              :style="{backgroundColor:monthColors[i-1],height:'100%'}">
              <div
                style="flex-shrink: 0; height: 50%;display: flex; align-items: center;justify-content: center; color: #fff; font-size: 34px;">
                {{i}}月</div>
              <div class="layui-card-body" style="height: 50%;width: 100%;">
                <div class="zz" id="value1"
                  style="display: flex;justify-content: space-between; width: 100%;">
                  <div style="width: 100%;font-size: 24px;">
                    <div>党员</div>
                    <span style="font-size: 18px;">
                      {{ partyMemberMonthlyData[i-1]?.Pay_Quantity || 0 }} / {{
                        partyMemberMonthlyData[i-1]?.Total_Quantity || 0 }}
                    </span>
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div style="width: 100%;font-size: 24px;">
                    <div>党组织</div>
                    <span :style="{ 'font-size': '18px', 'color': partyOrgMonthlyData[i-1]?.payStatus === '已缴纳' ? 'green' : 'red' }">
                      {{ partyOrgMonthlyData[i-1]?.payStatus || '未缴纳' }}
                    </span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <!-- <el-table id="table" border
          :data-options="JSON.stringify({ 'TableName': 'party_fees','primary_key':'Party_Fee_SerialNumber'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata" :row-key="row=>row.Party_Member_SerialNumber"
          @selection-change="handleSelectionChange">
          <el-table-column fixed="left" reserve-selection  :selectable="selectable" type="selection" width="40"></el-table-column>
          <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
            :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" fixed="right" label="交纳状态">
            <template v-slot="{row}">
              {{row.Party_Fee_SerialNumber?'已交纳':'未交纳'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
          :page-sizes="[10, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="Total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      </div>
    </div>
    <el-dialog v-model="showDialog" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>设置显示字段</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-checkbox v-model="isAllChecked" @change="handleAllChecked" class="full-width-checkbox">全选</el-checkbox>
        <div class="checkbox-columns">
          <el-checkbox-group v-model="checkedFields" style="width: 100%; display: flex; flex-wrap: wrap">
            <el-checkbox :disabled="field.COLUMN_KEY === 'PRI'" v-for="field in fields" :key="field" :value="field"
              style="width: 50%; height: 30px; margin-right: 0px">
              {{ field.COLUMN_COMMENT }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="saveFields" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="calendar" width="900" class="custom-dialog">
      <!-- <template #header>
          <div class="dialog-header">
              <span>查看月历</span>
          </div>
      </template> -->
      <div class="dialog-content">
        <!-- <el-select clearable v-model.trim="Party_Organization_SerialNumber" placeholder="请选择责任单位" filterable
          style="width: 100%">
          <el-option v-for="(item,index) in organization" :key="index" :label="item.Party_Organization_Name"
            :value="item.Party_Organization_SerialNumber"></el-option>
        </el-select> -->
        <yl-cascader v-model="Party_Organization_SerialNumber" filterable
          :props="{value:'Party_Organization_SerialNumber',label:'Party_Organization_Name',children:'children',checkStrictly: true}"
          placeholder="请选择党组织" :options="Manager" style="width: 100%"></yl-cascader>
        <yl-monthly-calendar :value="Party_Organization_SerialNumber"></yl-monthly-calendar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="calendar = false" class="cancel-btn">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="showDialog2" width="550" class="custom-dialog">
      <template #header>
        <div class="dialog-header">
          <span>请选择缴费时间</span>
        </div>
      </template>
      <div class="dialog-content">
        <el-form :model="{Fee_Date}" ref="form" :inline-message="true" style="width: 100%">
          <el-descriptions :column="1" size="large" border>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">缴费时间</div>
              </template>
              <el-form-item prop="Fee_Date"
                :rules="[{ required: true,  validator: Fee_Date_Validity, trigger: 'change' }]">
                <el-date-picker v-model="Fee_Date" type="date" placeholder="请选择缴费时间" class="borderless-input"
                  style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="large" />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog2 = false" class="cancel-btn">取消</el-button>
          <el-button type="primary" @click="handleSubmit" class="confirm-btn">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- -->
  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/party_fees.js"></script>
</body>

</html>